<template>
  <div>
    <el-dialog
      :visible.sync="showPicDialog"
      title="流程图"
      width="100%"
      fullscreen
    >
      <div>
        <el-row>
          <el-col :span="24" class="liucheng" style="margin-bottom:10px;">
            <div class="bg_tiao" v-if="tableList.length>1"></div>
            <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;" v-if="tableList.length>1">
                <div class="text_dh">
                    <div style="color:#0762c3;margin:0 45px">开始</div>
                    <div v-if="type == '开始'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                    <img v-else class="imgs" src="./start.png" alt="">
                </div>
                <div class="text_dh">
                    <div style="color:#0762c3;margin:0 27px">发放提审</div>
                    <div v-if="type == '发放提审'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                    <div v-else-if="failed1 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                    <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
                </div>
                <div class="text_dh">
                    <div style="color:#0762c3;margin:0 27px">领导串行审批</div>
                    <div v-if="type == '领导串行审批'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                    <div v-else-if="failed2 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                    <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
                </div>
                <div class="text_dh">
                    <div style="color:#0762c3;margin:0 27px">发放提审(上级)</div>
                    <div v-if="type == '发放提审(上级)'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                    <div v-else-if="failed4 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                    <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
                </div>
                <div class="text_dh">
                    <div style="color:#0762c3;margin:0 27px">领导串行审批(上级)</div>
                    <div v-if="type == '领导串行审批(上级)'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                    <div v-else-if="failed5 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                    <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
                </div>
                <div class="text_dh">
                    <div style="color:#0762c3;margin:0 45px;">结束</div>
                    <div v-if="type == 'end'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                    <img v-else-if="failed6 == true" class="imgs" src="./end2.png" alt="">
                    <img v-else class="imgs" src="./end.png" alt="">
                </div>
            </div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
            <div class="line4"></div>
            <div class="line5"></div>
            <div class="line6"></div>
            <div id="triangle-up"></div>
            <div id="triangle-left"></div>
            <div class="bg_tiao2" v-if="tableList.length > 0"></div>
            <div style="display:flex; justify-content:space-between ;width:100%;z-index: 8; position: sticky;margin-top:20px" v-if="tableList.length>1">
                <div class="text_dh" style="margin-left:33%">
                  <div style="color:#0762c3;margin:0 45px">发放调整</div>
                  <div v-if="type == '发放调整'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                  <div v-else-if="failed3 == true" class="failed"><i class="el-icon-star-on checkedfailed"></i></div>
                  <div v-else class="chenck_active"><i class="el-icon-star-on checked2"></i></div>
                </div>
                <!-- <div class="text_dh">
                    <div style="color:#0762c3;margin:0 45px;">结束</div>
                    <div v-if="type == 'end'" class="redpoint"><i class="el-icon-s-flag active_guang"></i></div>
                    <img v-else-if="failed4 == true" class="imgs" src="./end2.png" alt="">
                    <img v-else class="imgs" src="./end.png" alt="">
                </div> -->
            </div>
          </el-col>
          <el-col :span="24"
            ><el-table :data="tableList" border style="width: 100%">
              <el-table-column
                prop="taskId"
                label="任务ID"
                width="80"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="processInstanceId"
                label="实例ID"
                header-align="center"
                align="center"
                width="90"
              >
              </el-table-column>
              <el-table-column
                prop="taskName"
                width="200"
                label="任务名称"
                header-align="center"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="assignee"
                width="180"
                label="处理人"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      scope.row.taskName == '部门绩效考核联络员任务填报' &&
                      scope.row.flag
                    "
                    >{{ scope.row.assignee
                    }}<i
                      style="margin-left: 5px; color: #1a71fb; cursor: pointer"
                      @click="showUserNd(scope.row)"
                      class="el-icon-edit-outline"
                    ></i
                  ></span>
                  <span v-else-if="scope.row.flag"
                    >{{ scope.row.assignee }}
                    <i
                      style="margin-left: 5px; color: #1a71fb; cursor: pointer"
                      @click="showUser(scope.row.taskId)"
                      class="el-icon-edit-outline"
                    ></i>
                  </span>
                  <span v-else>{{ scope.row.assignee }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="start"
                label="开始时间"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.start">{{
                    scope.row.start.substr(0, 10)
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="end"
                label="结束时间"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.end">{{
                    scope.row.end.substr(0, 10)
                  }}</span>
                </template>
              </el-table-column>
            </el-table></el-col
          >
        </el-row>
      </div>
      <el-dialog
        width="30%"
        title="请选择"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-table
          :data="chooseList"
          style="width: 100%"
          @row-click="rowChooseBtn"
        >
          <el-table-column
            prop="bmName"
            label="部门"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            header-align="center"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-dialog>
      <UserCommonSelectTask
        v-if="usercommentTask"
        ref="userTask"
        @submitfy="submitfyTask"
      ></UserCommonSelectTask>
    </el-dialog>
  </div>
</template>
<script>
import { showMessage } from "@/api/activiti/task";
import { getNodeInfo } from "@/api/jiangjin/jiangjinfpjjfpdjb";
import { getLlrList } from "@/api/hetongrenwu/zhongdian/renwuchuangjian";
import { changeAss } from "@/api/hetongrenwu/hetonghtxxdjb";
import UserCommonSelectTask from "@/views/hetongrenwu/components/usercomment-select";
export default {
  data() {
    return {
      tableList: [],
      showPicDialog: false,
      chooseList: [],
      innerVisible: false,
      proId: "",
      taskId: "",
      usercommentTask: false,
      type:"",
      failed1:false,
      failed2:false,
      failed3:false,
      failed4:false,
      failed5:false,
      failed6:false
    };
  },
  components: {
    UserCommonSelectTask,
  },
  methods: {
    init(proId) {
      this.type == "",
      this.tableList == [],
      this.proId = '',
      this.proId = proId;
      this.fnlist();
      getNodeInfo(proId).then(res=>{
          this.type = res.data.data;
          if(res.data.data =='发放提审'){
            this.failed1 = false;
            this.failed2 = true;
            this.failed3 = true;
            this.failed4 = true;
            this.failed5 = true;
            this.failed6 = true;
          }else if(res.data.data =='领导串行审批'){
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = true;
            this.failed4 = true;
            this.failed5 = true;
            this.failed6 = true;
          }else if(res.data.data =='发放调整'){
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = true;
            this.failed5 = true;
            this.failed6 = true;
          }else if(res.data.data =='发放提审(上级)'){
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = true;
            this.failed6 = true;
          }else if(res.data.data =='领导串行审批(上级)'){
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = true;
          }else if(res.data.data =='end'){
            this.failed1 = false;
            this.failed2 = false;
            this.failed3 = false;
            this.failed4 = false;
            this.failed5 = false;
            this.failed6 = false;
          }
      })
    },
    fnlist() {
      showMessage(this.proId).then((res) => {
        this.tableList = res.data.data;
        this.showPicDialog = true;
      });
    },
    showUserNd(row) {
      var params = {
        deptId: row.deptId,
      };
      getLlrList(params).then((res) => {
        this.chooseList = res.data.data;
        this.chooseList.forEach((ele) => {
          ele.taskId = row.taskId;
        });
        this.innerVisible = true;
      });
    },
    rowChooseBtn(row) {
      changeAss({
        taskId: row.taskId,
        userId: row.userId,
      }).then((res) => {
        this.$message.closeAll()
        this.$message.success("审批人更换成功");
        this.innerVisible = false;
        this.fnlist();
        this.$emit("processTrackingChildren", "返回");
      });
    },
    showUser(taskId) {
      this.taskId = taskId;
      this.usercommentTask = true;
      this.$nextTick(() => {
        this.$refs.userTask.init("", "zxshr", JSON.stringify([]), "htcj");
      });
    },
    submitfyTask(data) {
      if (data.tableDataUser.length != 1) {
        this.$message.closeAll();
        this.$message.error("请指定唯一的审批人");
      } else {
        changeAss({
          taskId: this.taskId,
          userId: data.tableDataUser[0].userId,
        }).then((res) => {
          this.$message.closeAll();
          this.$message.success("审批人更换成功");
          this.fnlist();
          this.$emit("processTrackingChildren", "返回");
        });
      }
    },
  },
};
</script>
<style>
.bg_tiao {
  width: 100%;
  background: #a9c6ea;
  height: 4px;
  top: 45px;
  position: relative;
  z-index: 2;
}
.liucheng {
  border-radius: 16px;
  height: 223px;
  -webkit-box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  box-shadow: 5px 5px 10px #e3e3ea, -5px -5px 10px #ffffff;
  background: #fbfbfd;
  padding: 30px;
  position: relative;
}
.redpoint{
    width: 31px;
    height: 31px;
    margin: 0 3px 6px 3px;
    border-radius: 50%;
    background: #e43030;
    box-shadow: 4px 4px 6px #bd0a0a;
    text-align: center;
}
.active_guang{
    color:#fff;
    font-size:20px;
    line-height: 31px;
    border-radius: 50%;
}
.failed{
  width: 31px;
  height: 31px;
  margin: 0 3px 6px 3px;
  border-radius: 50%;
  background: #c2c6ca;
  -webkit-box-shadow: 4px 4px 6px #8a8a8a;
  box-shadow: 4px 4px 6px #8a8a8a;
  text-align: center;
}
.checkedfailed{
  color: #fff;
  font-size: 20px;
  line-height: 31px;
  text-align: center;
  background: #c2c6ca;
  border-radius: 50%;
}
.line1{
  width:4px;
  height:80px;
  background: #a9c6ea;
  position: absolute;
  left:28%;
  top:85px;
}
.line2{
  width:4px;
  height:90px;
  background: #a9c6ea;
  position: absolute;
  left:45%;
  top:75px;
}
.line3{
  width:4px;
  height:90px;
  background: #a9c6ea;
  position: absolute;
  left:65%;
  top:75px;
}
.line4{
  width:4px;
  height:77px;
  background: #a9c6ea;
  position: absolute;
  left:45%;
  top:13px;
}
.line5{
  width:42%;
  height:4px;
  background: #a9c6ea;
  position: absolute;
  left:45%;
  top:10px;
}
.line6{
  width:4px;
  height:67px;
  background: #a9c6ea;
  position: absolute;
  left:87%;
  top:10px;
}
#triangle-up{
	display:inline-block;
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom:16px solid #a9c6ea;
  position: absolute;
  left:27.5%;
  top:78px;
  }
#triangle-left {
	display:inline-block;
	width:0;
	height:0;
	border-top: 10px solid transparent;
	border-right: 16px solid #a9c6ea;
	border-bottom: 10px solid transparent;
  position: absolute;
  left: 40%;
  top: 155px;
  }

</style>
